<!DOCTYPE HTML>
<html>
<header>

</header>
<body>
<div style="position:relative; background-color:#000" onmouseenter="play()" onmouseleave="stop()">
    <canvas id="bg" width=363 height=233></canvas>
    <canvas id="circleLeft" width=41 height=41 style="position:absolute;top:85px;left:84px"></canvas>
    <canvas id="circleRight" width=41 height=41 style="position:absolute;top:85px;left:234px; "></canvas>
    <canvas id="progress" width=290 height=5
            style="position:absolute;top:149px;left:38px;"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('bg');
        var context = canvas.getContext('2d');
        var canvasCircleLeft = document.getElementById('circleLeft');
        var contextCircleLeft = canvasCircleLeft.getContext('2d');
        var canvasCircleRight = document.getElementById('circleRight');
        var contextCircleRight = canvasCircleRight.getContext('2d');
        var canvasProgress = document.getElementById('progress');
        var contextProgress = canvasProgress.getContext('2d');

        var bg = new Image();
        bg.src = "bg.png";
        bg.onload = function () {
            context.drawImage(bg, 0, 0);
        }
        var circleLeft = new Image();
        circleLeft.src = "circle.png";
        circleLeft.onload = function () {
            contextCircleLeft.translate(20.5, 20.5);
            contextCircleLeft.drawImage(circleLeft, -20.5, -20.5);
        }
        var circleRight = new Image();
        circleRight.src = "circle.png";
        circleRight.onload = function () {
            contextCircleRight.translate(20.5, 20.5);
            contextCircleRight.drawImage(circleRight, -20.5, -20.5);
        }
        var intLeft = null;
        var intRight = null;
        var progress = 0;

        function play() {
            intLeft = setInterval(function () {
                contextCircleLeft.clearRect(-20.5, -20.5, 41, 41);
                contextCircleLeft.rotate(Math.PI / 180 * 2);
                contextCircleLeft.drawImage(circleLeft, -20.5, -20.5);
            }, 30);
            intRight = setInterval(function () {
                contextCircleRight.clearRect(-20.5, -20.5, 41, 41);
                contextCircleRight.rotate(Math.PI / 180 * 2);
                contextCircleRight.drawImage(circleRight, -20.5, -20.5);
            }, 30);
            intProgress = setInterval(function () {
                contextProgress.clearRect(0, 0, 290, 5);
                progress += 0.01;
                contextProgress.fillStyle = "#00FF00";
                contextProgress.fillRect(0, 0, 290 * progress, 5);
            }, 1000);
            // TODO 播放音频
        }

        function stop() {
            clearInterval(intLeft);
            clearInterval(intRight);
            clearInterval(intProgress);
            progress = 0;
            contextProgress.clearRect(0, 0, 290, 5);

            // TODO 停止音频
        }
    </script>
</div>
</body>
</html>